iT邦幫忙

2021 iThome 鐵人賽

DAY 2
2
Modern Web

30天搞定CSS及切版系列 第 2

display : Inline、Block、Inline-Block

  • 分享至 

  • xImage
  •  

display:Inline、Block、Inline-Block

前言

display是用來設置每個元素的排版方式,每種元素都有預設的display。
常見的display有:inline、block、inline-block、flex、grid。
在這邊只介紹前三者的差異與用法。


inline

使元素內的文字、圖片皆顯示在同一行。

下方圖片是一段文字中間穿插了一個inline元素。

可設定Padding、Margin、但實際上會影響版面的只有水平方向,垂直方向的只有效果並不會影響排版。

padding:10px;

可發現 inline 元素撐開了左右內距
padding top、bottom 則只有覆蓋過了上下的文字。

margin:10px;

inline 元素撐開了相鄰左右的文字,但上下的行距並沒有改變。

設定寬高無效。

width:1000px;
height:1000px;

寬高仍無動於衷XD

無法換行。

多個inline元素排列~


block

元素會以區塊的方式呈現

可設定寬高。

設定Padding、Margin 水平、垂直皆會受到影響。

文字可分行。

元素寬度預設占滿父元素寬度100%

<div class="parent">
  <div class="child"></div>
</div>
.parent
{
  height:200px;
  width:200px;
  background-color: #A3AADE;
  
}
.child
{
  height:70px;
  background-color: pink;
}

子元素在只有設定height的情況下,width直接填滿了父元素的寬~

設定寬度

當我們將寬度設為50px,我們看到的的確是只佔了父元素的一半寬度。

width:50px;

下一個元素只會從下一行排列,並不會接在上一個子元素的旁邊

<div class="parent">
  
  <div class="child">
    子元素 ?
  </div>
  <div class="child2">
    子元素2 ?
  </div>
  
</div>


inline-block

可設定寬高。

水平、垂直的Padding、Margin皆會作用。

下一個inline、inline-block元素可以直接接在後面不用換行,直至總寬度超過父元素大小才會換行

.parent
{
  width:200px;
}
.child
{
  width:80px;
  display:inline-block;
}
.child2
{
  width:80px;
  display:inline-block;
}

將 child2 寬度改成 150
child1 + child2 寬度 = 80 + 150 > 200
所以child2會換行

.parent
{
  width:200px;
}
.child
{
  width:80px;
  display:inline-block;
}
.child2
{
  width:150px;
  display:inline-block;
}

額外 inline-block的間隙問題

在我們正常排版的情況下,元素間會有間隙
是因為inline-block會把換行以及tab認為是一個空白

<div class="parent">
  
  <div class="child">
    子元素 ?
  </div>
  <div class="child2">
    子元素2?
  </div>
</div>

解決方法

讓上一個元素的 ==</ div>== 跟下一個元素的 < div> 黏在一起

<div class="parent">
  <div class="child">
    子元素 ?
  </div><div class="child2">
    子元素2?
  </div>
</div>

上一篇
CSS-Model 盒模型
下一篇
偽元素(pseudo element)、偽類別(pseudo element)
系列文
30天搞定CSS及切版16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言